<template>
  <div class="container">
    <Header />
    <NavBar />
    <div class="center-content">
      <div class="order-nav">
        <div class="nav-info">
          <a href="">首页</a>
          <span class="sep">/</span>
          <span>交易订单</span>
        </div>
      </div>
      <div class="order-center">
        <div class="order-box">
          <div class="row">
            <div class="order-left">
              <div class="left-menu">
                <!-- 订单中心 -->
                <div class="menu-box">
                  <h3 class="title">订单中心</h3>
                  <ul class="list">
                    <li class="active">
                      <a href="">我的订单</a>
                    </li>
                    <li>
                      <a href="">评价晒单</a>
                    </li>
                    <li>
                      <a href="">话费充值订单</a>
                    </li>
                    <li>
                      <a href="">以旧换新订单</a>
                    </li>
                  </ul>
                </div>
                <!-- 个人中心 -->
                <div class="menu-box">
                  <h3 class="title">个人中心</h3>
                  <ul class="list">
                    <li class="active">
                      <a href="">我的个人中心</a>
                    </li>
                    <li>
                      <a href="">消息通知</a>
                    </li>
                    <li>
                      <a href="">购买资格</a>
                    </li>
                    <li>
                      <a href="">现金账户</a>
                    </li>
                    <li>
                      <a href="">小米礼品卡</a>
                    </li>
                    <li>
                      <a href="">现金卷</a>
                    </li>
                    <li>
                      <a href="">喜欢的商品</a>
                    </li>
                    <li>
                      <a href="">优惠券</a>
                    </li>
                    <li>
                      <a href="">收货地址</a>
                    </li>
                    <li>
                      <a href="">红包</a>
                    </li>
                  </ul>
                </div>
                <!-- 售后服务 -->
                <div class="menu-box">
                  <h3 class="title">售后服务</h3>
                  <ul class="list">
                    <li class="active">
                      <a href="">服务记录</a>
                    </li>
                    <li>
                      <a href="">申请服务</a>
                    </li>
                    <li>
                      <a href="">领取快递报销</a>
                    </li>
                  </ul>
                </div>
                <!-- 账户中心 -->
                <div class="menu-box">
                  <h3 class="title">账户管理</h3>
                  <ul class="list">
                    <li class="active">
                      <a href="">个人信息</a>
                    </li>
                    <li>
                      <a href="">修改密码</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="order-right">
              <div class="main-box">
                <div class="order-list-box">
                  <div class="box-hd">
                    <h1 class="title">
                      我的订单
                      <small>请谨防钓鱼链接或诈骗电话</small>
                      <a href="">,了解更多></a>
                    </h1>
                    <div class="more">
                      <ul class="filter-list">
                        <li class="active">
                          <a href="">全部有效订单</a>
                        </li>
                        <li>
                          <a href="">待支付</a>
                        </li>
                        <li>
                          <a href="">待收货</a>
                        </li>
                        <li>
                          <a href="">订单回收站</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div
                    class="box-bd"
                    v-for="(item, index) in AllorderList"
                    :key="index"
                  >
                    <div class="order-head">
                      <div class="order-status">
                        <h3>已收货</h3>
                      </div>
                      <ul class="order-desc">
                        <li class="order-date">
                          {{
                            item.createdAt.substring(0, 19).split("T").join(" ")
                          }}
                        </li>
                        <li class="order-name">{{ item.shops_name }}</li>
                        <li class="order-id">{{ item.order_id }}</li>
                        <li class="pay">在线支付(支付宝支付)</li>
                      </ul>
                      <div class="pay">
                        实付金额:
                        <span>{{ item.total_price }}</span>
                        元
                      </div>
                    </div>
                    <div class="order-bd">
                      <ul class="product-right">
                        <li><a href="">订单详情</a></li>
                        <li><a href="">申请售后</a></li>
                        <li><a href="">联系客服</a></li>
                      </ul>
                      <div
                        class="product"
                        v-for="(item, index) in JSON.parse(item.goods_info)"
                        :key="index"
                      >
                        <div class="order-img">
                          <a :href="`#/detail/${item.id}`">
                            <img v-lazy="item.s_goods_photos[0].path" alt="" />
                          </a>
                        </div>
                        <div class="order-desc">
                          <div class="product-name">{{ item.goods_name }}</div>
                          <div class="product-price">{{ item.price }}元</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import NavBar from "../components/NavBar.vue";
import Footer from "../components/Footer.vue";
import { getOrderAll } from "../assets/js/request";
export default {
  data() {
    return {
      AllorderList: [],
    };
  },
  async created() {
    let res = await getOrderAll();
    // console.log(res);
    this.AllorderList = res.rows;
    console.log(this.AllorderList);
  },
  methods: {},

  components: {
    Header,
    NavBar,
    Footer,
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/config.scss";
@import "../assets/scss/reset.scss";
.center-content {
  width: 100%;
  margin: 0 auto;
  background-color: #f5f5f5;
  .order-nav {
    width: 100%;
    height: 40px;
    .nav-info {
      width: 1226px;
      text-align: left;
      padding-left: 130px;
      font-size: 12px;
      padding-top: 13px;
      //   background-color: #f5f5f5;

      a {
        color: #757575;
      }
      .sep {
        margin: 0.5em;
        color: #b0b0b0;
      }
      span {
        color: #757575;
      }
    }
  }
  .order-center {
    background-color: #f5f5f5;
    padding-bottom: 40px;
    .order-box {
      width: 1226px;
      margin: 0 auto;
      .row {
        margin-left: -14px;
        display: flex;
        .order-left {
          width: 234px;
          .left-menu {
            background-color: #fff;
            padding: 36px 0;
            .menu-box {
              margin: 0 48px 12px;
              text-align: left;
              .title {
                font-size: 16px;
                font-weight: 400;
                line-height: 52px;
                color: #333;
                margin: 0;
                padding: 0;
              }
              ul {
                margin: 0;
                padding: 0;
                list-style: none;
                text-align: left;
                li {
                  padding: 6px 0;
                  a {
                    color: #757575;
                  }
                }
                .active {
                  color: #ff6700;
                }
              }
            }
          }
        }
        .order-right {
          width: 978px;
          float: right;
          margin-left: 14px;
          min-height: 1px;
          .main-box {
            background-color: #fff;
            .order-list-box {
              margin: 0 48px;
              .box-hd {
                // display: flex;
                text-align: left;
                .title {
                  margin: 0;
                  font-size: 30px;
                  font-weight: 400;
                  line-height: 68px;
                  color: #757575;
                  small {
                    margin-top: 25px;
                    margin-left: 10px;
                    font-size: 12px;
                    line-height: 1.5;
                    color: #757575;
                  }
                  a {
                    margin: 25px;
                    margin-left: 1px;
                    font-size: 12px;
                    line-height: 1.5;
                    color: #757575;
                  }
                }
                .more {
                  border-bottom: 0;
                  .filter-list {
                    display: flex;
                    margin: 0;
                    padding: 18px 0;
                    list-style-type: none;
                    font-size: 16px;
                    line-height: 1.5;
                    li a {
                      float: left;
                      padding: 0 20px;
                      border-right: 1px solid #e0e0e0;
                      color: #757575;
                      cursor: pointer;
                    }
                    .active a {
                      color: #ff6700;
                      cursor: pointer;
                    }
                  }
                }
              }
              .box-bd {
                width: 800px;
                // height: 400px;
                border: 1px solid #757575;
                margin-bottom: 20px;
                .order-head {
                  height: 180px;
                  border-bottom: 1px solid #757575;
                  .order-status h3 {
                    color: #b0b0b0;
                    text-align: left;
                    font-size: 20px;
                    padding: 30px 20px 10px;
                  }
                  .del {
                    float: right;
                  }
                  .order-desc {
                    display: flex;
                    padding: 10px 20px;
                    color: #757575;
                    li {
                      border-right: 1px solid #757575;
                      padding: 0 15px;
                      font-size: 16px;
                    }
                  }
                  .pay {
                    //   display: flex;
                    padding-top: 10px;
                    padding-right: 30px;
                    float: right;
                    color: #757575;
                    font-size: 16px;
                    span {
                      // display: block;
                      padding: 0px 10px;
                      font-size: 24px;
                      color: black;
                    }
                  }
                }
                .order-bd {
                  .product {
                    display: flex;
                    .order-img {
                      margin: 10px;
                      float: left;
                      // background-color: skyblue;
                      width: 100px;
                      // margin: 0px auto;
                      img {
                        margin: 20px auto;
                        width: 50px;
                        height: 50px;
                      }
                    }
                    .order-desc {
                      margin: 5px;
                      width: 300px;
                      // height: 100px;
                      padding: 30px 10px;
                      .product-name,
                      .product-price {
                        text-align: left;
                      }
                    }
                  }
                  .product-right {
                    float: right;
                    li {
                      width: 120px;
                      height: 25px;
                      border: 1px solid #757575;
                      margin: 10px 20px;
                      padding-top: 2px;
                      text-align: center;
                      font-size: 12px;
                      a {
                        color: #757575;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>